import React, { Component } from "react";
import footercss from "./index.module.css";

export default class index extends Component {
  // 切换全选状态
  handleCheckAll = (event) => {
    this.props.checkAllTodo(event.target.checked);
  };
  // 删除已完成
  deleteAllDidDone = ()=>{
    this.props.doneAllTodo()
  }

  render() {
    // 从父组件接收到所有代办
    const { todos } = this.props;
    // 已完成数
    let didCount = todos.filter((item) => item.done).length;
    // 全部数量
    let allCount = todos.length;
    return (
      <div className={footercss.footerMain}>
        <label>
          <input
            type="checkbox"
            onChange={this.handleCheckAll}
            checked={didCount === allCount && allCount !== 0 ? true : false}
          />
        </label>
        <div>
          已完成{didCount} / 全部{allCount}
        </div>
        <div onClick={this.deleteAllDidDone}>清除已完成数据</div>
      </div>
    );
  }
}
